<script setup>
import router from "@/router/index.js";
import {ref} from "vue";

const id = ref()
const active = ref(0);
const onClickLeft = () => {
  router.back()
}

/**
 * 获取路由中的用户id
 */
const getUserInfo = () => {
  const params = router.currentRoute.value.params
  id.value = params.id // 获取用户 ID
}
getUserInfo()
</script>

<template>
  <div class="user-home-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="用户详情"
      @click-left="onClickLeft"
    />
    <div class="user-info-container">
      <div class="user-info">
        <div class="avatar">
          <van-image
            height="50"
            radius="5"
            width="50"
          >
          </van-image>
        </div>
        <div class="info">
          <div class="nickname">昵称昵称昵称昵称</div>
          <div class="description">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</div>
          <div class="user-item">
            <span>队伍: 10000</span>
            <span>关注: 10000</span>
            <span>粉丝: 10000</span>
          </div>
        </div>
        <div class="button">
          <van-button v-if="active" plain size="mini" type="primary"><van-icon name="plus" />关注</van-button>
          <van-button v-else plain size="mini" type="danger"><van-icon name="minus" />取关</van-button>
        </div>
      </div>
      <div class="user-tag">
        <span>标签</span>
        <van-icon color="arrow" name="arrow"/>
        <div class="tag">
          <van-tag v-for="(item,index) in tagList" :key="index" class="tag-item" size="large" type="primary">
            {{ item.text }}
          </van-tag>
        </div>
      </div>
    </div>

    <div class="tab-container">
      <van-tabs v-model:active="active" animated>
        <van-tab title="队伍">队伍</van-tab>
        <van-tab title="关注">关注</van-tab>
        <van-tab title="粉丝">粉丝</van-tab>
        <van-tab title="详情">详情</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped>
.user-home-page {
  background: #f1f1f1;
  min-height: 100vh;
}

.user-info-container {
  padding: 10px;
}

.user-info {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background: rgb(255, 255, 255);
}

.user-info .button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.user-info .avatar {
  margin-right: 10px;
}

.user-info .info .nickname {
  font-size: 18px;
  margin-bottom: 5px;
}

.user-info .info .description {
  font-size: 12px;
  color: #909399;
}

.user-info .info .user-item {
  font-size: 12px;
  color: #474747;
}

.user-info .info .user-item span {
  margin-right: 10px;
}

/* 我的标签样式 */
.user-tag {
  box-sizing: border-box;
  margin-top: 10px;
  padding: 20px;
  border-radius: 5px;
  background: rgb(255, 255, 255);
}

.user-tag {
  position: relative;
  font-size: 18px;
  color: #252525;
}

.user-tag .van-icon {
  position: absolute;
  right: 20px;
}

.user-tag .tag {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.user-tag .tag .tag-item {
  margin-top: 6px;
  margin-right: 6px;
}
</style>
